<template>
    <div>
       <!-- 评论区域：引用子组件。 -->
      <h2>发表评论：</h2>
      <hr>
      <textarea placeholder="发表评论(最多吐槽120字)" maxlength="120" v-model="text"></textarea> 
      <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
      <div class="com-list">
          <div class="com-item" v-for="(item,i) in comment" :key="item.add_time">
              <div class="con-title">
                  第{{i+1}}楼 &nbsp;&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;&nbsp;发表时间：{{item.add_time|timename}}
              </div>
              <div class="con-body">
                 {{item.content==="undefined"? "此用户很懒":item.content}}
              </div>
          </div>
      </div>
       <mt-button type="danger" size="large">加载更多</mt-button>
    </div>

</template>
<script>
//按需导入Toast组件
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
         comment:[],
         text:""
        }
    },
    created(){
     this.getComment()
    },
    methods:{
      getComment(){
           this.$http.get('http://localhost:3030/plun/'+this.id).then(result =>{
                 var news=JSON.parse(result.bodyText)
                if(news.status===0){
                 this.comment=this.comment.concat(news.message)
                 Toast("获取评论")
                }else{
                Toast("没获评论")
                }
           })
      },
      postComment(){
          if(this.text.trim().length===0){
            return Toast('评论内容不能为空')
          }
          var cnt={user_name:"匿名用户",add_time:Date.now(),content:this.text.trim()}
          this.comment.unshift(cnt)
          this.text=""
      }
     
    },
     props:["id"]
}
</script>
<style scoped>
 h2{
    font-size: 18px;
 }
 textarea{
     font-size: 13px;
     height: 85px;
     margin: 0;
 }
 .com-list{
     margin-top: 10px 0;
 }
 .com-item{
  font-size: 14px;
 }
 .con-title{
     line-height: 35px;
     background-color: #ccc;
 }
 .con-body{
     text-indent: 2em;
    line-height: 35px; 
 }
</style>


